<template>
  <div class="home">
    <div class="top">
      <el-button size="mini" type="prymary" @click="toPath('./')"
        >首页</el-button
      >
      <div class="title">中国各省份人口流向统计系统</div>
      <div class="topself">
        <div class="top-box">
          <b>[北京]</b>人口涌入量（单位十万）
          <count-to
            :startVal="startVal2"
            :endVal="endVal2"
            :duration="3000"
          ></count-to>
          人口流失量（单位十万）
          <count-to
            :startVal="startVal1"
            :endVal="endVal1"
            :duration="3000"
          ></count-to>
        </div>
        <div class="top-box">
          <b>[上海]</b>人口涌入量（单位十万）
          <count-to
            :startVal="startVal1"
            :endVal="endVal1"
            :duration="3000"
          ></count-to>
          人口流失量（单位十万）
          <count-to
            :startVal="startVal2"
            :endVal="endVal2"
            :duration="3000"
          ></count-to>
        </div>
        <div class="top-box">
          <B>[广州]</B>人口涌入量（单位十万）
          <count-to
            :startVal="startVal2"
            :endVal="endVal2"
            :duration="3000"
          ></count-to>
          人口流失量（单位十万）
          <count-to
            :startVal="startVal1"
            :endVal="endVal1"
            :duration="3000"
          ></count-to>
        </div>
        <div class="top-box">
          <b>[深圳]</b>人口涌入量（单位十万）
          <count-to
            :startVal="startVal1"
            :endVal="endVal1"
            :duration="3000"
          ></count-to>
          人口流失量（单位十万）
          <count-to
            :startVal="startVal2"
            :endVal="endVal2"
            :duration="3000"
          ></count-to>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="form1">
        <div class="select">
          <el-select
            v-model="value"
            placeholder="不同城市近七日人口涌入图"
            @change="handleChange"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="biao1" id="main"></div>
        <!-- <div class="biao1" id="main"></div> -->
        <div class="t1">2024年5月1日各城市人口流向对比图</div>
        <div class="biao2" id="main2"></div>
      </div>
      <div class="form2">
        <div class="shizhong" id="feng"></div>
      </div>
      <div class="form3">
        <div class="t1">近七日部分城市人口流失折线图</div>
        <div class="biao3" id="main3"></div>
        <div class="t2">近日热点事件</div>
        <div class="list-scroll">
          <ul
            ref="scrollList"
            class="scroll-list"
            @mouseenter="stopScroll"
            @mouseleave="startScroll"
          >
            <li v-for="(event, index) in events" :key="index">{{ event }}</li>
            <li v-for="(event, index) in events" :key="index + events.length">
              {{ event }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import CountTo from "vue-count-to";
import * as echarts from "echarts";
// import { Select } from "element-ui";

export default {
  components: {
    CountTo,
  },
  data() {
    return {
      startVal1: 0,
      endVal1: this.getRandomNumber(),
      startVal2: 0,
      endVal2: this.getRandomNumberDifferentFrom(this.endVal1),
      options: [
        {
          value: "选项1",
          label: "北京",
        },
        {
          value: "选项2",
          label: "上海",
        },
        {
          value: "选项3",
          label: "陕西",
        },
        {
          value: "选项4",
          label: "四川",
        },
      ],
      value: "",
      events: [
        "事件1",
        "事件2",
        "事件3",
        "事件4",
        "事件5",
        "事件6",
        "事件7",
        "事件8",
        "事件9",
        "事件10",
        "事件11",
        "事件12",
        "事件13",
      ],
      chartData: {
        选项1: [150, 180, 220, 210, 150, 170, 260], // 北京的数据
        选项2: [200, 170, 190, 120, 150, 200, 250], // 上海的数据
        选项3: [110, 180, 250, 140, 190, 200, 170], // 陕西的数据
        选项4: [130, 310, 200, 330, 340, 300, 170], // 四川的数据
      },
    };
  },
  mounted() {
    const chartDom1 = document.getElementById("main");
    const myChart1 = echarts.init(chartDom1);

    const option1 = {
      xAxis: {
        type: "category",
        data: ["5.1", "5.2", "5.3", "5.4", "5.5", "5.6", "5.7"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: this.chartData["选项1"], // 默认显示北京的数据
          type: "line",
        },
      ],
    };

    myChart1.setOption(option1);

    var chartDom2 = document.getElementById("main2");
    var myChart2 = echarts.init(chartDom2);
    var option2 = {
      legend: {},
      tooltip: {},
      dataset: {
        source: [
          ["product", "流失", "涌入"],
          ["四川", 185, 240],
          ["陕西", 123, 210],
          ["湖南", 190, 150],
          ["甘肃", 250, 100],
        ],
      },
      xAxis: { type: "category" },
      yAxis: {},
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [{ type: "bar" }, { type: "bar" }],
    };

    option2 && myChart2.setOption(option2);

    var chartDom3 = document.getElementById("main3");
    var myChart3 = echarts.init(chartDom3);
    var option3 = {
      title: {
        text: " ",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["四川", "陕西", "广州", "深圳", "山东"],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      // toolbox: {
      //   feature: {
      //     saveAsImage: {},
      //   },
      // },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["5.1", "5.2", "5.3", "5.4", "5.5", "5.6", "5.7"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "四川",
          type: "line",
          stack: "Total",
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "陕西",
          type: "line",
          stack: "Total",
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: "广州",
          type: "line",
          stack: "Total",
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: "深圳",
          type: "line",
          stack: "Total",
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: "山东",
          type: "line",
          stack: "Total",
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    };

    option3 && myChart3.setOption(option3);

    var chartDom4 = document.getElementById("feng");
    var myChart4 = echarts.init(chartDom4);
    var option4 = {
      series: [
        {
          name: "hour",
          type: "gauge",
          startAngle: 90,
          endAngle: -270,
          min: 0,
          max: 12,
          splitNumber: 12,
          clockwise: true,
          axisLine: {
            lineStyle: {
              width: 15,
              color: [[1, "#fff"]],
              shadowColor: "rgba(0, 0, 0, 0.3)",
              shadowBlur: 15,
            },
          },
          splitLine: {
            lineStyle: {
              shadowColor: "#fff",
              shadowBlur: 3,
              shadowOffsetX: 1,
              shadowOffsetY: 2,
            },
          },
          axisLabel: {
            fontSize: 50,
            distance: 25,
            formatter: function (value) {
              if (value === 0) {
                return "";
              }
              return value + "";
            },
          },
          anchor: {
            show: true,
            icon: "path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z",
            showAbove: false,
            offsetCenter: [0, "-35%"],
            size: 120,
            keepAspect: true,
            itemStyle: {
              color: "#707177",
            },
          },
          pointer: {
            icon: "path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z",
            width: 12,
            length: "55%",
            offsetCenter: [0, "8%"],
            itemStyle: {
              color: "#C0911F",
              shadowColor: "rgba(0, 0, 0, 0.3)",
              shadowBlur: 8,
              shadowOffsetX: 2,
              shadowOffsetY: 4,
            },
          },
          detail: {
            show: false,
          },
          title: {
            offsetCenter: [0, "30%"],
          },
          data: [
            {
              value: 0,
            },
          ],
        },
        {
          name: "minute",
          type: "gauge",
          startAngle: 90,
          endAngle: -270,
          min: 0,
          max: 60,
          clockwise: true,
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            icon: "path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z",
            width: 8,
            length: "70%",
            offsetCenter: [0, "8%"],
            itemStyle: {
              color: "#C0911F",
              shadowColor: "rgba(0, 0, 0, 0.3)",
              shadowBlur: 8,
              shadowOffsetX: 2,
              shadowOffsetY: 4,
            },
          },
          anchor: {
            show: true,
            size: 20,
            showAbove: false,
            itemStyle: {
              borderWidth: 15,
              borderColor: "#C0911F",
              shadowColor: "rgba(0, 0, 0, 0.3)",
              shadowBlur: 8,
              shadowOffsetX: 2,
              shadowOffsetY: 4,
            },
          },
          detail: {
            show: false,
          },
          title: {
            offsetCenter: ["0%", "-40%"],
          },
          data: [
            {
              value: 0,
            },
          ],
        },
        {
          name: "second",
          type: "gauge",
          startAngle: 90,
          endAngle: -270,
          min: 0,
          max: 60,
          animationEasingUpdate: "bounceOut",
          clockwise: true,
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            icon: "path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z",
            width: 4,
            length: "85%",
            offsetCenter: [0, "8%"],
            itemStyle: {
              color: "#C0911F",
              shadowColor: "rgba(0, 0, 0, 0.3)",
              shadowBlur: 8,
              shadowOffsetX: 2,
              shadowOffsetY: 4,
            },
          },
          anchor: {
            show: true,
            size: 15,
            showAbove: true,
            itemStyle: {
              color: "#C0911F",
              shadowColor: "rgba(0, 0, 0, 0.3)",
              shadowBlur: 8,
              shadowOffsetX: 2,
              shadowOffsetY: 4,
            },
          },
          detail: {
            show: false,
          },
          title: {
            offsetCenter: ["0%", "-40%"],
          },
          data: [
            {
              value: 0,
            },
          ],
        },
      ],
    };
    setInterval(function () {
      var date = new Date();
      var second = date.getSeconds();
      var minute = date.getMinutes() + second / 60;
      var hour = (date.getHours() % 12) + minute / 60;
      option4.animationDurationUpdate = 300;
      myChart4.setOption({
        series: [
          {
            name: "hour",
            animation: hour !== 0,
            data: [{ value: hour }],
          },
          {
            name: "minute",
            animation: minute !== 0,
            data: [{ value: minute }],
          },
          {
            animation: second !== 0,
            name: "second",
            data: [{ value: second }],
          },
        ],
      });
    }, 1000);

    option4 && myChart4.setOption(option4);

    //每三秒循环一次随机数
    setInterval(() => {
      this.updateValues();
    }, 3000);
  },
  methods: {
    toPath(path) {
      this.$router.push(path);
    },
    getRandomNumber() {
      return Math.floor(Math.random() * 1000); //生成一个0到1之间的随机数然后乘一千再向下取整。
    },
    getRandomNumberDifferentFrom(target) {
      let num;
      do {
        num = this.getRandomNumber();
      } while (num === target);
      return num;
    },
    updateValues() {
      this.startVal1 = this.endVal1;
      this.endVal1 = this.getRandomNumber();
      this.startVal2 = this.endVal2;
      this.endVal2 = this.getRandomNumberDifferentFrom(this.endVal1);
    },
    stopScroll() {
      const scrollList = this.$refs.scrollList;
      scrollList.style.animationPlayState = "paused";
    },
    startScroll() {
      const scrollList = this.$refs.scrollList;
      scrollList.style.animationPlayState = "running";
    },
    handleChange(value) {
      const chartDom1 = document.getElementById("main");
      const myChart1 = echarts.init(chartDom1);

      const option1 = {
        xAxis: {
          type: "category",
          data: ["5.1", "5.2", "5.3", "5.4", "5.5", "5.6", "5.7"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.chartData[value], // 根据选择的值更新数据
            type: "line",
          },
        ],
      };

      myChart1.setOption(option1);
    },
  },
};
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.top {
  width: 100%;
  height: 300px;
  background: #220f9c;
  margin: 0;
}
.title {
  width: 100%;
  height: 100px;
  background: navy;
  color: #fff;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.topself {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-box {
  width: 25%;
  height: 200px;
  background: #220f9c;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 20px;
  border: 1px solid #000;
}
.top-box b {
  color: red;
  font-size: 25px;
}
.container {
  width: 100%;
  min-height: 800px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.form1 {
  width: 20%;
  max-height: 800px;
  background: #220f9c;
  border: 1.5px solid #000;
}
.select {
  width: 100%;
  margin-bottom: 2px;
}

.select > .el-select {
  width: 100%;
}
.biao1 {
  width: 100%;
  height: 300px;
  background: #0c024c;
  color: #fff;
  margin-bottom: 110px;
}
.t1 {
  width: 100%;
  height: 50px;
  color: #fff;
  margin-bottom: 0;
}

.biao2 {
  width: 100%;
  height: 300px;
  background: #0c024c;
}
.form2 {
  width: 60%;
  min-height: 800px;
  background: #220f9c;
  border: 1px solid #000;
}
// .form2 b {
//   font-size: 50px;
//   color: #fff;
//   display: flex;
//   justify-content: center;
//   align-items: center;
// }
.shizhong {
  width: 100%;
  height: 800px;
  background: #220f9c;
}
.form3 {
  width: 20%;
  min-height: 800px;
  background: #220f9c;
  border: 1.5px solid #000;
}
.biao3 {
  width: 100%;
  height: 300px;
  background: #0c024c;
}

.t2 {
  width: 100%;
  height: 50px;
  color: #fff;
  margin-bottom: 0;
}

.list-scroll {
  margin-top: 100px;
  width: 100%;
  height: 300px;
  background: #0c024c;
  color: #fff;
  overflow: hidden; /* 隐藏溢出 */
}

.scroll-list {
  width: 100%;
  height: 300px;
  // overflow-y: scroll;
  padding: 0;
  margin: 0;
  list-style: none;
  animation: scrollList 10s linear infinite;
}

@keyframes scrollList {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
</style>
